<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="`${$t('batchHandover')}`"
    width="60%">
    <el-row>
      <el-form :model="searchForm" :inline="true" label-width="120px">
        <el-form-item :label="$t('operator')">
          <el-input v-model="searchForm.currentId" disabled name="currentId"/>
        </el-form-item>
        <el-form-item :label="$t('password')">
          <el-input v-model="searchForm.currentPassword" auto-complete="new-password" name="currentPassword" type="password"/>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <dynTable
        ref="dynTable"
        :loading="false"
        :table-data="tableData"
        :table-columns="tableColumns"
      />
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="HandOver(1)">确认交接</el-button>
      <el-button type="danger" @click="HandOver(3)">{{
        $t("forceHandover")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getHandOverInfo, doHandOver } from '@/api/production/handover'
export default {
  name: 'ForcedHandover',
  data() {
    const tableColumns = [
      { prop: 'eqp1Id', label: this.$t('handlerId') },
      { prop: 'eqp2Id', label: this.$t('testerId') },
      { prop: 'nextId', label: this.$t('handlerUserId'), templete: (_scope) => {
        return (
          <el-input vModel={_scope.row.nextId} clearable name='nextID'>
          </el-input>
        )
      } },
      { prop: 'nextPassword', label: this.$t('password'), templete: (_scope) => {
        return (
          <el-input vModel={_scope.row.nextPassword} clearable type='password' auto-complete='new-password'>
          </el-input>
        )
      } }
    ]
    return {
      dialogVisible: false,
      searchForm: {
        currentId: this.$store.state.user.user.userID
      },
      tableData: [],
      tableColumns: Object.freeze(tableColumns)
    }
  },
  methods: {
    handleOpen(lotId = '') {
      getHandOverInfo().then(res => {
        this.tableData = res.data
        this.searchForm.lotId = lotId
      })
      this.dialogVisible = true
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    HandOver(num) {
      const tempTable = this.tableData.filter(item => item.nextId && item.nextPassword)
      doHandOver({ ...this.searchForm, userList: tempTable, type: num }).then(res => {
        this.$betterTips(res, this.handleClose)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-row{
    margin-bottom: 20px;
}
</style>
